import styles from './index.less';
import { useState, useEffect } from 'react';
import { Tabs, Menu } from "antd";
import type { MenuProps } from "antd";
import { AndroidOutlined } from '@ant-design/icons';

import GamoteLottieReact from "./gamoteLottieReact";
import LottieFilesLottieReact from "./lottieFilesLottieReact";
import DotLottieReact from './dotlottieReact';

type MenuItem = Required<MenuProps>['items'][number];

type TargetKey = React.MouseEvent | React.KeyboardEvent | string;

const menuItems: MenuItem[] = [
    {
        key: "lottie",
        label: "Lottie",
        icon: <AndroidOutlined />,
        children: [
            {
                key: "gamote/LottieReact",
                label: "gamote/LottieReact",
            },
            {
                key: "lottieFiles/LottieReact",
                label: "lottieFiles/LottieReact",
            },
            {
                key: "lottieFiles/DotLottieReact",
                label: "lottieFiles/DotLottieReact",
            },
        ],
    },
];

const allTabs: Tab[] = [
    {
        label: 'gamote/LottieReact',
        key: 'gamote/LottieReact',
        children: <GamoteLottieReact />,
        closable: true,
    },
    {
        label: 'lottieFiles/LottieReact',
        key: 'lottieFiles/LottieReact',
        children: <LottieFilesLottieReact />,
        closable: true,
    },
    {
        label: 'lottieFiles/DotLottieReact',
        key: 'lottieFiles/DotLottieReact',
        children: <DotLottieReact />,
        closable: true,
    },
];

export default () => {

    const [activeMenuKey, setActiveMenuKey] = useState<string>('gamote/LottieReact');

    const [activeTabKey, setActiveTabKey] = useState<string>('gamote/LottieReact');

    useEffect(() => {
        // @ts-ignore
        window.openTab = openTab;
    }, []);

    const onMenuClick: MenuProps['onClick'] = (e) => {
        openTab(e.key);
    };

    const onTabChange = (key: string) => {
        openTab(key);
    };

    const onTabEdit = (targetKey: TargetKey, action: 'add' | 'remove') => {
        if (action === 'add') {
            // 暂时edit只会有remove，add是通过menu菜单触发的
        } else {
            removeTab(targetKey as string);
        }
    };

    const openTab = (key: string) => {
        setActiveTabKey(key);
        setActiveMenuKey(key);
    }

    const removeTab = (_key: string) => {

    };

    return (
        <div className={styles.content}>
            <Menu
                onClick={onMenuClick}
                style={{ width: 250 }}
                className={styles.menus}
                selectedKeys={[activeMenuKey]}
                defaultSelectedKeys={[activeMenuKey]}
                defaultOpenKeys={['lottie']}
                mode="inline"
                items={menuItems}
            />

            <Tabs
                hideAdd
                className={styles.tabs}
                onChange={onTabChange}
                activeKey={activeTabKey}
                type='editable-card'
                onEdit={onTabEdit}
                items={allTabs}
            />
        </div>
    );
}